import Slider from '@react-native-community/slider';
import React, { useRef, useState } from 'react';
import { FlatList } from 'react-native';
import { Dimensions, StatusBar, View, TouchableOpacity } from 'react-native';
import { Button, Text } from 'react-native-elements';
import { ListItem } from 'react-native-elements/dist/list/ListItem';
import Orientation from 'react-native-orientation';
import Icon from 'react-native-vector-icons/FontAwesome';
import Video from 'react-native-video';
import { globalColor, pxPage, throttle } from '~/common/Common';
let screenWidth = Dimensions.get('window').width;
let screenHeight = Dimensions.get('window').height;
let deviceHeight = Dimensions.get('screen').height;

const VideoDemo = (props) => {
    // AsyncStorage.removeItem('time');
    // 用于样式
    const [width, setwidth] = useState(screenWidth);
    const [height, setHeight] = useState((screenWidth * 720 / 1280));
    const [videoPosition, setVideoPosition] = useState(StatusBar.currentHeight);
    const [paddingLeft, setPaddingLeft] = useState(0);
    const [paddingRight, setPaddingRight] = useState(0);
    const [paddingTop, setPaddingTop] = useState(0);
    const [paddingBottom, setPaddingBottom] = useState(0);
    const [size, setSize] = useState(20);
    // 状态判定
    const [start, setStart] = useState(false);
    const [position, setPosition] = useState(true);
    const [show, setshow] = useState(true);
    // 播放控制-总时长-当前时长
    const [duration, setDuration] = useState(0);
    const [currentTime, setCurrentTime] = useState(0);
    // 视频对象
    let videoPlayer = useRef();
    const [num, setNum] = useState(0);
    // const onLoadCallback = useCallback(async (e) => {
    //     // 隐藏按钮
    //     // debounce(setshow(false),3000);
    //     setDuration(e.duration);
    //     // time注释跳转能用，time能获取但是跳转null,离谱
    //     // console.log(getTime(), videoPlayer);
    //     // videoPlayer.seek(getTime());
    // }, [videoPlayer, AsyncStorage, setCurrentTime])


    // console.log(props.navigation.state.params.item);
    // 性能方面跟个鬼一样
    // const handleCallback = useCallback(()=>{

    // },[])
    const { item, playlist } = props.navigation.state.params;
    // console.log(playlist,typeof playlist);
    let list = playlist.filter((item) => {
        return item.url !== "timeout"
    })
    console.log(list[num].url);
    return (
        <View style={{
            flex: 1, backgroundColor: globalColor.defaultFontColor, position: 'relative',
            paddingBottom: paddingBottom,
            paddingTop: paddingTop,
            paddingLeft: paddingLeft,
            paddingRight: paddingRight,
        }}>
            {
                // 导航栏样式，小屏黑色，全屏隐藏
                position
                    ? <StatusBar
                        backgroundColor="black"
                        barStyle={globalColor.defaultFontColor_wi}
                    ></StatusBar>
                    : <StatusBar
                        backgroundColor="black"
                        hidden={true}
                        barStyle={globalColor.defaultFontColor_wi}
                    ></StatusBar>
            }
            <View
                //视频外面的盒子
                style={[{
                    width: width,
                    height: height,
                    position: 'absolute',
                    top: videoPosition,
                }, position ? null : { paddingLeft: 30, paddingRight: 30, width: width - 60, position: 'absolute', left: 30 }]}
            >
                <Video
                    ref={ref => (videoPlayer = ref)}
                    source={{ uri: list[num].url }}
                    style={[{
                        width: width,
                        height: height,
                        position: 'absolute',
                    }, position ? null : { paddingLeft: 30, paddingRight: 30, width: width - 60 }]}
                    allowsExternalPlayback={true}
                    // 是否开始
                    paused={start}
                    resizeMode="cover"
                    poster={item.img}
                    // 加载完毕的回调函数
                    onLoad={(e) => setDuration(e.duration)}
                    // 这玩意是用来记录当前播放进度
                    onProgress={throttle((e) => {
                        setCurrentTime(e.currentTime);
                        // AsyncStorage.setItem("time", JSON.stringify(currentTime));
                    }, 1000)}
                    resizeMode={'cover'}
                ></Video>
                {/* <View
                    style={{flex:1,backgroundColor:'red'}}
                ></View> */}

            </View>
            {
                show
                    ? <View
                        // 视频遮罩层
                        style={[{
                            width: width,
                            height: height,
                            position: 'absolute',
                            top: videoPosition,
                        }, position ? null : { paddingLeft: 30, paddingRight: 30, width: width - 60, position: 'absolute', left: 30 }]}
                    >
                        <View style={styles.video_top}>
                            <Button
                                icon={
                                    <Icon name="arrow-left" size={pxPage(size)} color={globalColor.defaultFontColor_wi}></Icon>
                                }
                                buttonStyle={{ backgroundColor: null }}
                                onPress={throttle(() => {
                                    if (position) props.navigation.goBack();
                                    else {
                                        setPosition(true);
                                        // 变成横屏
                                        Orientation.lockToPortrait();
                                        // 样式变化
                                        setwidth(screenWidth);
                                        setHeight(screenWidth * 720 / 1280);
                                        setVideoPosition(StatusBar.currentHeight);
                                        setSize(20)
                                    }
                                    Orientation.lockToPortrait();
                                    setPosition(true);
                                }, 2000)}
                                containerStyle={{ position: 'absolute', left: pxPage(10) }}
                            ></Button>
                            <Button
                                icon={
                                    <Icon name="bars" size={pxPage(size)} color={globalColor.defaultFontColor_wi}></Icon>
                                }
                                buttonStyle={{ backgroundColor: null }}
                                onPress={throttle(() => {
                                }, 2000)}
                                containerStyle={{ position: 'absolute', right: pxPage(10) }}
                            ></Button>
                        </View>
                        <View style={[{
                            width: '100%',
                            flexDirection: 'row',
                            justifyContent: 'space-between',
                            position: 'absolute',
                            bottom: pxPage(20),
                            alignItems: 'center',
                        }, position ? null : { position: 'absolute', left: 30 }]}>
                            {/* 视频播放按钮 */}
                            {
                                start
                                    ? <Button
                                        icon={
                                            <Icon name="play" size={pxPage(size)} color={globalColor.defaultFontColor_wi}></Icon>
                                        }
                                        buttonStyle={{ backgroundColor: null }}
                                        containerStyle={{ position: 'absolute', left: pxPage(10) }}
                                        onPress={throttle(() => {
                                            setStart(false)
                                        }, 2000)}
                                    ></Button>
                                    : <Button
                                        // 暂停
                                        icon={
                                            <Icon name="pause" size={pxPage(size)} color={globalColor.defaultFontColor_wi}></Icon>
                                        }
                                        buttonStyle={{ backgroundColor: null }}
                                        containerStyle={{ position: 'absolute', left: pxPage(10) }}
                                        onPress={throttle(() => {
                                            setStart(true)
                                        }, 2000)}
                                    ></Button>
                            }
                            <Text
                                style={{
                                    fontSize: pxPage(size * 0.7),
                                    color: globalColor.defaultFontColor_wi,
                                    // position:'absolute',
                                    marginLeft: pxPage(60)
                                }}
                            >{parseInt(currentTime / 60)}:{parseInt(currentTime % 60)}/{parseInt(duration / 60)}:{parseInt(duration % 60)}</Text>
                            <Slider
                                style={{ width: '65%', position: 'relative', right: pxPage(40), }}
                                value={currentTime}
                                maximumValue={duration}
                                step={1}
                                onValueChange={(value) => {
                                    videoPlayer.seek(value);
                                }}
                                onSlidingComplete={value => {
                                    videoPlayer.seek(value);
                                }}
                            ></Slider>
                            <Button
                                icon={
                                    <Icon name={position ? "expand" : "compress"} size={pxPage(size)} color={globalColor.defaultFontColor_wi}></Icon>
                                }
                                buttonStyle={{ backgroundColor: null }}
                                containerStyle={{ position: 'absolute', right: pxPage(10) }}
                                onPress={throttle(() => {
                                    if (position) {
                                        // 横屏
                                        setPosition(false);
                                        Orientation.lockToLandscape();
                                        setwidth(deviceHeight);
                                        setHeight(screenWidth);
                                        setVideoPosition(0);
                                        setPaddingLeft(30);
                                        setPaddingRight(20);
                                        setSize(30)
                                    } else {
                                        setPosition(true);
                                        Orientation.lockToPortrait();
                                        setwidth(screenWidth);
                                        setHeight(screenWidth * 720 / 1280);
                                        setVideoPosition(StatusBar.currentHeight);
                                        setSize(20);
                                        setPaddingLeft(0);
                                        setPaddingRight(0);
                                    }
                                }, 2000)}
                            ></Button>
                        </View>
                    </View>
                    : null
            }
            {
                show ? <View style={{ width: '100%', height: screenHeight - height, backgroundColor: '#ccc', position: 'relative', top: height + StatusBar.currentHeight, padding: pxPage(20), marginTop: pxPage(10) }}>
                    <FlatList
                        data={list}
                        numColumns={4}
                        ListEmptyComponent={() => {
                            return (
                                <Text>加载中.....</Text>
                            )
                        }}
                        onEndReachedThreshold={0.5}
                        keyExtractor={(contact, index) => String(index)}
                        renderItem={({ item, index }) => {
                            return (
                                <TouchableOpacity
                                    style={{
                                        width: pxPage(75),
                                        height: pxPage(30),
                                        marginBottom: pxPage(15),
                                        marginRight: pxPage(15)
                                    }}
                                    onPress={() => {
                                        // console.log(item.url);
                                        setNum(index)
                                    }}
                                >
                                    <Text style={{ textAlign: "center", }}>第{index + 1}集</Text>
                                </TouchableOpacity>
                            )
                        }}
                    ></FlatList>
                </View>
                    : null
            }
        </View>
    )
}

export default VideoDemo;
